<template>
  <div class="index">
    <van-nav-bar
      title="精品应用"
      left-arrow
      @click-left="onClickLeft"
      safe-area-inset-top
      fixed
      placeholder
      :z-index="10000"
    ></van-nav-bar>
    <div class="list">
      <div
        class="listItem"
        v-for="(item, index) in initData.boutique_list"
        :key="index"
        @click="downLoad(item)"
      >
        <img src="@/assets/images/bg.png" alt="" />
        <div class="pos">
          <div class="pic"><img :src="item.cover" alt="" /></div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="hot">
      <div class="title">热门推荐</div>
      <div class="box">
        <div
          class="boxItem"
          v-for="(item, index) in initData.recommend_list"
          :key="index"
          @click="downLoad(item)"
        >
          <div class="left">
            <div class="img"><img :src="item.cover" alt="" /></div>
            <div class="info">
              <div class="name">{{ item.name }}</div>
              <div class="num">{{ item.download_num }}下载</div>
              <div class="intro">{{ item.small_title }}</div>
            </div>
          </div>
          <div class="right"><img src="../assets/images/btn.png" alt="" /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar, Toast } from "vant";
import request from "@/common/request.js";
import { onMounted, reactive, toRefs, getCurrentInstance } from "vue";
export default {
  name: "index",
  components: {
    [NavBar.name]: NavBar,
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      initData: {},
    });
    onMounted(() => {
      getInitData();
    });
    const onClickLeft = () => {};
    const getInitData = async () => {
      let params = {};
      let res = await request.checkPost(proxy.$api.index, params);
      if (res) {
        data.initData = res.data;
      }
    };
    const downLoad = (item) => {
      var u = navigator.userAgent;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

      if (item.is_app == 1) {
        if (isiOS) {
         window.location.href=item.ios_link;
        }
        if (isAndroid) {
         window.location.href=item.android_link;
        }
      }else{
        window.location.href=item.link;
      }
    };

    return {
      ...toRefs(data),
      onClickLeft,
      downLoad,
    };
  },
};
</script>
<style lang="less"  scoped>
.index {
  :deep(.van-nav-bar__placeholder) {
    background: #fff;
  }
  :deep(.van-nav-bar) {
    background: rgba(34, 0, 52, 0.93);
    padding-top: 0.2rem;
  }
  :deep(.van-nav-bar__title) {
    color: #fff;
  }
  :deep(.van-nav-bar .van-icon) {
    color: #fff;
  }
  :deep([class*="van-hairline"]::after) {
    border: none;
  }
  .list {
    padding: 0 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    .listItem {
      width: 48%;
      position: relative;
      margin-top: 0.12rem;
      border-radius: 0.16rem;
      img {
        width: 100%;
      }
      .pos {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .pic {
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 0.2rem;
          border: 4px solid rgba(255, 255, 255, 0.26);
        }
        .name {
          margin-top: 0.12rem;
          font-size: 0.14rem;
          color: #fff;
          text-align: center;
        }
      }
    }
  }
  .hot {
    margin-top: 0.17rem;
    padding: 0 0.16rem 0.45rem 0.16rem;
    .title {
      font-size: 0.16rem;
      color: #fff;
    }
    .box {
      width: 100%;
      .boxItem {
        margin-top: 0.24rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        .left {
          width: 75%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .img {
            img {
              width: 0.8rem;
              height: 0.8rem;
              border-radius: 0.2rem;
            }
          }
          .info {
            margin-left: 0.16rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            height: 100%;
            .name {
              font-size: 0.16rem;
              color: #fff;
            }
            .num {
              font-size: 0.12rem;
              color: rgba(255, 255, 255, 0.4);
            }
            .intro {
              font-size: 0.14rem;
              color: rgba(255, 255, 255, 0.7);
            }
          }
        }
        .right {
          width: 0.64rem;
          img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
